import React, {PureComponent} from 'react';
import {WhiteSpace, Button} from 'antd-mobile';
import {Control} from 'react-keeper';
import HeadNavBar from 'Components/HeadNavBar';
import './index.less';

export default class Index extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      select: 0
    };
  }

  bindLeftClick = () => {
    Control.go(-1);
  };

  bindAddAddress = () => {
    Control.go('/address/add');
  };

  bindSelect(key) {
    this.setState({
      select: key
    });
  };

  render() {
    console.log(this.state.select);
    return (
      <div>
        <HeadNavBar
          title='配送地址'
          mode='light'
          icon='&#xe61a;'
          bindLeftClick={this.bindLeftClick}
        />
        <div style={{height: 53}}/>
        <div className='address-list'>
          <div className='radio' onClick={() => this.bindSelect(1)}>
            <i className='iconfont'
               dangerouslySetInnerHTML={{__html: this.state.select === 1 ? '&#xe624;' : '&#xe653;'}}/>
          </div>
          <div className='user-address'>
            <p className='user'>
              <span>江死秒</span>
              <span>18300127914</span>
            </p>
            <p className='address'>北京北京市东城区王府井</p>
          </div>
          <div className='operate-item'>
            <i className='iconfont'>&#xe6b0;</i>
          </div>
          <div className='clear'/>
        </div>

        <div className='address-list'>
          <div className='radio' onClick={() => this.bindSelect(2)}>
            <i className='iconfont'
               dangerouslySetInnerHTML={{__html: this.state.select === 2 ? '&#xe624;' : '&#xe653;'}}/>
          </div>
          <div className='user-address'>
            <p className='user'>
              <span>江死秒</span>
              <span>18300127914</span>
            </p>
            <p className='address'>北京北京市东城区王府井</p>
          </div>
          <div className='operate-item'>
            <i className='iconfont'>&#xe6b0;</i>
          </div>
          <div className='clear'/>
        </div>
        <WhiteSpace size='lg'/>
        <Button onClick={this.bindAddAddress}>+ 新增地址</Button>
        <WhiteSpace size='lg'/>
        <Button type="primary">确定</Button>
      </div>
    )
      ;
  }
}